<template>
    <div class="app-container">
        <el-form :model="user" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="用户账号" prop="account" >
                <el-input v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd" >
                <el-input v-model="user.pwd" type="password"></el-input>
            </el-form-item>
            <el-form-item class="myuploader" label="用户头像" prop="img" >
                <el-upload
                ref="uploader"
                class="upload-demo"
                :on-change="handleChange"
                :action="uploadUrl"
                :file-list="fileList"
                :data="user"
                :on-success="onSuccess"
                :on-error="onError"
                :multiple="false"
                :auto-upload="false"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="昵称" prop="realName" >
                <el-input v-model="user.realName"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="user.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"/>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" >
                <el-input v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item label="用户类型" prop="userType">
              <el-radio-group v-model="user.userType">
                <el-radio :label="1">系统管理员</el-radio>
                <el-radio :label="2">普通用户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button @click="returnPage()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
    
</template>

<script>
  export default {
    data() {
      return {
        fileList:[],
        uploadUrl:process.env.VUE_APP_BASE_API+'/user',
        user: {},
        rules: {
          account: [
            { required: true, message: '请输入用户账号', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          realName: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
          ],
          phone: [
            { message: '请输入手机号码',trigger: 'blur'},
	    	      {validator:function(rule,value,callback){
	            if(/^1[34578]\d{9}$/.test(value) == false){
	                callback(new Error("请输入正确的手机号"));
	            }else{
	                callback();
	            }
            }, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onSuccess() {
        this.$message('提交成功')
        this.$router.push('/relation/user')
      },
      onError() {
        this.$message('上传出错！')
      },
      handleChange(file, fileList) {
        console.log(file);
        const isPNG = file.raw.type === "image/png"
        const isJPG = file.raw.type === "image/jpg"
        const isJPEG = file.raw.type === "image/jpeg"
        const isGIF = file.raw.type === "image/gif"
        const isLt2M = file.raw.size / 1024 / 1024 < 0.5
        if (fileList.length > 0) {
        //单个覆盖上传
          this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的csv文件
          if (!isPNG && !isJPG && !isJPEG && !isGIF) {
            this.$message.error("只能上传图片格式png、jpg、jpeg、gif!")
            this.fileList = []
            return false
          } else if (!isLt2M) {
            this.$message.error("上传图片大小不能超过 200kb!")
            this.fileList = []
            return false
          }
          return true
        }
      },
      submitForm(formName) {
        if(this.fileList.length ==0){
          this.$message('请选择一张图片上传！')
          return ;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs.uploader.submit()
          } 
        })
      },
      resetForm(formName) {
        this.fileList=[]
        this.$refs[formName].resetFields()
      },
      /**
        * [returnPage 返回按钮]
        * @return {[type]} [description]
        */
      returnPage() {
      // 跳转上一级
      // 这个判断用来解决这种情况，当用户没有上一条路由的历史记录，出现点击返回按钮没有反应时，下面的代码用来判断有没有上一条路由的历史记录   如果没有则返回首页
        if (window.history.length <= 1) {
          this.$router.push({ path: "/zh-CN/home" });
          return false;
        } else {
          this.$router.go(-1);
        }
      }
    }
  }
</script>

<style scoped>
    .myuploader >>> .el-list-enter-active,.myuploader >>> .el-list-leave-active{
        transition: none;
    }

    .myuploader >>>.el-list-enter,.myuploader >>> .el-list-leave-active {
      opacity: 0;
    }
</style>